<!doctype html>
<html>
<head>
	<title>Threebox alignment Test</title>
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
	<script src="../dist/threebox.js" type="text/javascript"></script>
	<link href="../dist/threebox.css" rel="stylesheet" />
	<script src="config.js"></script>

	<style>
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			background: black;
		}

		#map {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id='map' class='map'>
		<div class="mapboxgl-ctrl helpDiv">
			<div id="help" class="help">
				This demo shows camera alignment between fill-extrusion layer and a 3DObject
			</div>
		</div>
	</div>
		<script type="module">

			// This example downloads a soldier model from an external OBJ/MTL file, adds it to the map, and drives it around via paths fetched from the Mapbox Directions API

			if (!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");

			mapboxgl.accessToken = config.accessToken;

			let origin = [-87.616938, 41.866222];
			let originRex = [-87.616194, 41.866194];
			let origin1 = [-87.61726, 41.865559];

			let map = new mapboxgl.Map({
				container: 'map',
				style: 'mapbox://styles/mapbox/streets-v11',
				//center: [-87.61694, 41.86625],
				center: origin,
				zoom: 18,
				pitch: 40,
				bearing: 20,
				antialias: true
			});

			let lineGeometry1 = [[-87.61726, 41.865559, 0], [-87.61726, 41.865559, 80]];

			let stats;
			import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
			function animate(timestamp) {
			
				// clamp the rotation between 0 -360 degrees
				// Divide timestamp by 100 to slow rotation to ~10 degrees / sec
				//rotateCamera(Date.now());
				stats.update();
				requestAnimationFrame(animate);
			}

			function rotateCamera(timestamp) {
				// clamp the rotation between 0 -360 degrees
				// Divide timestamp by 100 to slow rotation to ~10 degrees / sec
				map.rotateTo((timestamp / 100) % 360, { duration: 0 });
			}

			window.tb = new Threebox(
				map,
				map.getCanvas().getContext('webgl'),
				{
					realSunlight: true
				}
			);

			map.on('style.load', function () {
				// stats
				stats = new Stats();
				map.getContainer().appendChild(stats.dom);
				animate();

				map.addSource('floorplan', {
					// GeoJSON Data source used in vector tiles, documented at
					// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
					'type': 'geojson',
					'data': './geojson/indoor-3d-map.geojson'
				});

				map.addLayer({
					'id': 'room-extrusion',
					'type': 'fill-extrusion',
					'source': 'floorplan',
					'paint': {
						// See the Mapbox Style Specification for details on data expressions.
						// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions

						// Get the fill-extrusion-color from the source 'color' property.
						'fill-extrusion-color': ['get', 'color'],

						// Get fill-extrusion-height from the source 'height' property.
						'fill-extrusion-height': ['get', 'height'],

						// Get fill-extrusion-base from the source 'base_height' property.
						'fill-extrusion-base': ['get', 'base_height'],

						// Make extrusions slightly opaque for see through indoor walls.
						'fill-extrusion-opacity': 1
					}
				});

				map.addLayer({
					id: 'custom_layer',
					type: 'custom',
					renderingMode: '3d',
					onAdd: function (map, mbxContext) {

						let tubeOptions = {
							geometry: lineGeometry1,
							radius: .01,
							sides: 12,
							units: "scene",
							anchor: 'center',
							material: 'MeshPhysicalMaterial',
							color: '#00ffff'
						}
						let tube = tb.tube(tubeOptions);
						tube.setCoords(origin1);
						tb.add(tube);


						// Creative Commons NonCommercial License attribution: Asian Elephant low poly model by https://sketchfab.com/jeremielouvetz
						// https://sketchfab.com/3d-models/asian-elephant-2aeeb8958bc64240962b093705abffdf
						let elephant = {
							type: 'glb', 
							obj: './models/history/elephant.glb', //model url
							units: 'meters', //units in the default values are always in meters
							scale: 20,
							rotation: { x: 90, y: 180, z: 0 }, //default rotation
							anchor: 'center'
						}
						tb.loadObj(elephant, function (model) {
							model.setCoords([origin[0], origin[1], 0]);
							tb.add(model);
						});

						// Creative Commons NonCommercial License attribution: Dino low poly model by https://sketchfab.com/Blender_Fox1234
						// https://sketchfab.com/3d-models/triceratops-lowpoly-76beb95d0b5b41a3aae0d07c3eae99fa
						let dino = {
							type: 'fbx', 
							obj: './models/history/triceratops.fbx', //model url
							units: 'meters', //units in the default values are always in meters
							scale: 0.15,
							rotation: { x: 90, y: 90, z: 0 }, //default rotation
							anchor: 'center'
						}
						tb.loadObj(dino, function (model) {
							model.setCoords(originRex);
							tb.add(model);
						});


					},
					render: function (gl, matrix) {
						tb.update();
					}
				}, 'room-extrusion');

			})

		</script>
</body>
</html>